Day01-JavaScript Drum Kit
思考需要的功能
1.按鍵按下後需要發出聲音
2.發出聲音的同時加上css樣式,結束後移除css樣式
實作重點:
1.利用自定義屬性名稱 data-key,讓鍵盤按鈕找到對應的聲音檔。
2.監聽keydown事件 - 讓按鈕按下後發出聲音
3.監聽transitionend事件 -利用transitionend事件取消css樣式
在這個實例中,[data-key]這個自定義屬性名稱非常重要,
為什麼會指定這些特定的數字呢?
那是因為每一個按鈕都有自己的keyCode,
我們可以利用監聽keydown事件來找到每個按鈕的keyCode。
window.addEventListener('keydown', function(e){
console.log(e.keyCode)
})
印出 e.keyCode,發現e.keyCode就等於在HTML中寫好的[data-key]的值。
所以,利用這樣的唯一性,就可以找到對應的聲音檔,在鍵盤有keydown事件的條件下
設定audio這個變數,按下相對應的按鈕時,audio就代表該按鈕對應的聲音檔
例如: 按下 A ,A 的 keycode為 65 ,對應到的音檔就是 clap.wav
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
但如果按了其他沒有設定在HTML上的按鈕,會找不到相對應的聲音檔,
因此需要加上一行code防止這個錯誤發生
if(!audio) return //如果沒有audio存在就終止這個function
有了對應的聲音檔,我們可以試試看讓對應的聲音檔撥放出來。
audio.play()
將這幾行程式碼組合起來,並用中文解釋
按下鍵盤按鈕 > 找到特定的audio檔案並撥放它
window.addEventListener('keydown', function(e){
//console.log(e.keyCode)
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
if(!audio) return
audio.play()
})
做到這裡,發現連點同一個鍵盤按鈕的時候,聲音不會連續發出來,
這是因為每個聲音檔案的聲音長度大概都有2-3秒左右,
在整個聲音檔撥放完前,不會再撥放第二次。
解決的方法 => 每一次撥放前都將聲音檔倒回最開頭
audio.currentTime = 0
再來,為按鈕加上css樣式
作者很貼心的已經寫好樣式,就直接拿來用吧!
把注意力都放在寫JS上
觀察作者寫的css可以發現
.key => 目前所看到的樣式
.playing => 按鍵按下之後會顯示的樣式
所以現在的目標就是在按下按鈕時,
找出現在正按下的按鈕,並動態加入.playing的樣式
找出按鍵,一樣利用data-key的唯一性,我們就能夠得到現在按下的按鈕位置
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
找到後添加.palying的樣式
key.classList.add('playing')
最終的程式碼為
window.addEventListener('keydown', function(e){
//console.log(e.keyCode)
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
if(!audio) return
audio.currentTime = 0
audio.play()
key.classList.add('playing')
})
但是我們只加上了樣式,卻沒有移除它,所以樣式一直存在沒有消失
明天的目標就是解決這個問題。